<template>
  <div class="l-tab-page pd-8" style="overflow-y: auto;padding-bottom: 0;">
    <el-row :gutter="8">
      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>每周阅读时长折线图</span>
          </div>
          <l-echarts :option="line" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>上班出行方式折线图</span>
          </div>
          <l-echarts :option="multipleLine" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区气温折线图</span>
          </div>
          <l-echarts :option="weatherLine" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>酒店获客数折线图</span>
          </div>
          <l-echarts :option="stepLine" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="24" style="margin-bottom:0px;">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区人口出生折线图</span>
          </div>
          <l-echarts :option="largeLine" style="height:280px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        grid: {
          top: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#5B8FF9",
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF",
                  },
                ],
                global: false,
              },
            },
          },
        ],
      },
    };
  },
  computed: {
    line() {
      return this.$deepClone(this.option);
    },
    multipleLine() {
      let option = this.$deepClone(this.option);
      option.legend.data = ["步行", "自行车", "电动车", "公交车", "私家车"];
      option.series = [
        {
          name: "步行",
          type: "line",
          stack: "Total",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#fbc8d4",
            },
          },
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#9795f0",
                },
                {
                  offset: 1,
                  color: "#fbc8d4",
                },
              ],
            },
          },
          emphasis: {
            focus: "series",
          },
          data: [140, 232, 101, 264, 90, 340, 250],
        },
        {
          name: "自行车",
          type: "line",
          stack: "Total",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#005be0",
            },
          },
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00c6fb",
                },
                {
                  offset: 1,
                  color: "#005be0",
                },
              ],
            },
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 282, 111, 234, 220, 340, 310],
        },
        {
          name: "电动车",
          type: "line",
          stack: "Total",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#330867",
            },
          },
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#30cfd0",
                },
                {
                  offset: 1,
                  color: "#330867",
                },
              ],
            },
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 132, 201, 334, 190, 130, 220],
        },
        {
          name: "公交车",
          type: "line",
          stack: "Total",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#f6d365",
            },
          },
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#f6d365",
                },
                {
                  offset: 1,
                  color: "#fda085",
                },
              ],
            },
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 402, 231, 134, 190, 230, 120],
        },
        {
          name: "私家车",
          type: "line",
          stack: "Total",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#38f9d7",
            },
          },
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {
            opacity: 0.6,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#43e97b",
                },
                {
                  offset: 1,
                  color: "#38f9d7",
                },
              ],
            },
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 302, 181, 234, 210, 290, 150],
        },
      ];
      return option;
    },
    weatherLine() {
      let option = this.$deepClone(this.option);
      option.yAxis.axisLabel = {
        formatter: "{value} °C",
      };
      option.series = [
        {
          name: "最高气温",
          type: "line",
          smooth: true,
          data: [10, 11, 13, 11, 12, 12, 9],
          markPoint: {
            data: [
              { type: "max", name: "最高点" },
              { type: "min", name: "最低点" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均气温" }],
          },
        },
        {
          name: "最低气温",
          type: "line",
          smooth: true,
          data: [1, -2, 2, 5, 3, 2, 0],
          markPoint: {
            data: [
              { type: "max", name: "最高点" },
              { type: "min", name: "最低点" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均气温" }],
          },
        },
      ];
      return option;
    },
    stepLine() {
      let option = this.$deepClone(this.option);
      option.legend.data = ["酒店1", "酒店2", "酒店3"];
      option.series = [
        {
          name: "酒店1",
          type: "line",
          step: "start",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "酒店2",
          type: "line",
          step: "middle",
          data: [220, 282, 201, 234, 290, 430, 410],
        },
        {
          name: "酒店3",
          type: "line",
          step: "end",
          data: [450, 432, 401, 454, 590, 530, 510],
        },
      ];
      return option;
    },
    largeLine() {
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      let option = {
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: "出生人口数",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "2af598",
            },
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#2af598",
                  },
                  {
                    offset: 1,
                    color: "#009efc",
                  },
                ],
              },
            },
            data: data,
          },
        ],
      };
      return option;
    },
  },
};
</script>
